<template>
  <div>
    <el-form-item label-width="125px" label="切换规则">
      <el-button @click="flag = !flag">切换规则</el-button>
    </el-form-item>
    <form-create :rule="rule" v-model="formData" v-model:api="fApi" :option="options" />
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'

const flag = ref(false)
const fApi = ref(null)
const formData = ref({})
const rule = ref([
  { type: 'input', field: 'name', title: 'Name' },
  { type: 'input', field: 'email', title: 'Email' }
])
const options = ref({
  onSubmit: (_formData) => {
    alert(JSON.stringify(_formData))
    alert(JSON.stringify(formData.value))
  },
  resetBtn: true
})

watch(flag, (newValue) => {
  // 两种方式重置表单元素组件值与模型值
  // 1. 两个方法搭配fApi.value.resetFields()与fApi.value.setValue({})
  // fApi.value.resetFields()
  // fApi.value.setValue({})
  // 2. 直接使用双向绑定的模型数据formData.value = {}
  formData.value = {}
  if (newValue) {
    rule.value = [
      { type: 'datePicker', field: 'start_date', title: 'Start Date' },
      { type: 'select', field: 'department', title: 'Department' }
    ]
  } else {
    rule.value = [
      { type: 'input', field: 'name', title: 'Name' },
      { type: 'input', field: 'email', title: 'Email' }
    ]
  }
})
</script>
